<template>
	<view>
		<popup :zoom="zoom" mode="center" :popup="false" :z-index="_zIndex" v-model="value" :length="width" :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
			<view class="dialog">
				<view class="dialog__title" v-if="showTitle" :style="[titleStyle]">{{ title }}</view>
				<view class="dialog__content">
					<view :style="[contentStyle]" v-if="$slots.default">
						<slot></slot>
					</view>
					<view v-else class="dialog__content-message" :style="[contentStyle]">
						{{ content }}
					</view>
				</view>
				<view class="dialog__footer hairline--top" v-if="showCancelButton || showConfirmButton">
					<view v-if="showCancelButton" class="dialog__footer-btn" :hover-stay-time="100" hover-class="dialog__footer-btn--hover":style="[cancelBtnStyle]" @tap="cancel">
						{{ cancelText }}
					</view>
					<view v-if="showConfirmButton" class="dialog__footer-btn" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'dialog__footer-btn--hover'":style="[confirmBtnStyle]" @tap="confirm">
						<loading-icon type="spinner" v-if="loading"></loading-icon>
						<block v-else>
							{{ confirmText }}
						</block>
					</view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
    const zIndex = {
    	mask: 998,
    	popup: 999,
    	loading: 998,
    	navbar: 997
    }
	export default {
		name: 'componentDialog',
		data() {
			return {
				loading: false
			}
		},
		props: {
			value: Boolean,
			zIndex: {
				type: [Number, String],
				default: ''
			},
			title: {
				type: String,
				default: '提示'
			},
			width: {
				type: [Number, String],
				default: 600
			},
			content: {
				type: String,
				default: '内容'
			},
			showTitle: {
				type: Boolean,
				default: true
			},
			titleStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			contentStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			showConfirmButton: {
				type: Boolean,
				default: true
			},
			showCancelButton: {
				type: Boolean,
				default: true
			},
			confirmText: {
				type: String,
				default: '确认'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmColor: {
				type: String,
				default: '#333'
			},
			cancelColor: {
				type: String,
				default: '#999'
			},
			confirmStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			cancelStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			borderRadius: {
				type: [Number, String],
				default: 16
			},
			zoom: {
				type: Boolean,
				default: true
			},
			asyncClose: Boolean,
			canCancelAsync: {
				type: Boolean,
				default: true
			},
			maskCloseAble: Boolean,
			negativeTop: {
				type: [Number, String],
				default: 0
			}
		},
		watch: {
			value(to) {
				if (to) {
					this.loading = false
				}
			}
		},
		computed: {
			cancelBtnStyle() {
				return Object.assign({
					color: this.cancelColor
				}, this.cancelStyle);
			},
			confirmBtnStyle() {
				return Object.assign({
					color: this.confirmColor
				}, this.confirmStyle);
			},
			_zIndex() {
				return this.zIndex ? this.zIndex : zIndex.popup;
			}
		},
		methods: {
			confirm() {
				if (this.asyncClose) {
					this.loading = true
				} else{
					this.$emit('input', false)
				}
				this.$emit('confirm')
			},
			cancel() {
				if (!this.canCancelAsync && this.loading) {
					return false
				}
				this.$emit('cancel')
				this.$emit('input', false)
				setTimeout(() => {
					this.loading = false
				}, 300);
			},
			popupClose() {
				this.$emit('input', false);
			}
		}
	}
</script>

<style scoped lang="scss">
	.dialog {
		height: auto;
		font-size: 32rpx;
		&__title {
			padding-top: 40rpx;
			font-weight: bold;
			text-align: center;
			color: #000;
		}
		&__content {
			&-message {
				padding: 48rpx;
				font-size: 30rpx;
				text-align: center;
				color: #999;
			}
		}
		&__footer {
			display: flex;
			&-btn {
				flex: 1;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				text-align: center;
				&--hover {
					background-color: #f2f2f2;
				}
			}
		}
	}
</style>
